<template>
  <div class="reviewRecord-manager">
    <div class="query-form">
      <!-- 查询区域 -->
      <el-form ref="form" :inline="true" :model="reviewRecord">
        <el-form-item label="报销单ID" prop="rbId">
          <el-input v-model="reviewRecord.rbId" placeholder="请输入报销单ID" />
        </el-form-item>
        <el-form-item label="审查结果" prop="reviewFraud">
          <el-select
            v-model="reviewRecord.reviewFraud"
            class="el-select"
            style="width: 100px"
          >
            <el-option :value="0" label="非诈骗" />
            <el-option :value="1" label="诈骗" />
            <el-option :value="2" label="未审查" />
            <el-option :value="3" label="全选" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核人员" prop="reviewUserName">
          <el-input
            v-model="reviewRecord.reviewUserName"
            placeholder="请输入审核人员姓名"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div class="base-table">
      <el-table :data="reviewRecordList">
        <el-table-column width="55" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleRemark(scope.row)"
              v-has="'reviewRecord-queryRemark'"
              >查看备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total || 1"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 备注弹框 -->
    <el-dialog
      title="备注"
      v-model="showModel"
      width="40%"
      class="custom-dialog"
    >
      <el-text el-text class="mx-1">{{ reviewRecordForm.remark }}</el-text>
    </el-dialog>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
import utils from "@/utils/utils.js";
export default {
  name: "reviewRecord",
  setup() {
    const { proxy } = getCurrentInstance();
    const reviewRecord = reactive({
      rbId: "",
      reviewFraud: 3,
      reviewUserName: "",
    });
    const reviewRecordList = ref([]);
    const pager = reactive({
      pageNum: 1,
      pageSize: 10,
    });
    const showModel = ref(false);
    const reviewRecordForm = reactive({});
    const columns = reactive([
      {
        label: "报销单Id",
        prop: "rbId",
      },
      {
        label: "线上审查",
        prop: "onlineReview",
        formatter(row, column, value) {
          return {
            0: "未完成",
            1: "已完成",
          }[value];
        },
      },
      {
        label: "线下审查",
        prop: "offlineReview",
        formatter(row, column, value) {
          return {
            0: "未完成",
            1: "已完成",
          }[value];
        },
      },
      {
        label: "审查时间",
        prop: "uploadTime",
        width: 250,
        formatter: (row, column, value) => {
          return utils.formateDate(new Date(value));
        },
      },
      {
        label: "审查结果",
        prop: "reviewFraud",
        formatter(row, column, value) {
          return {
            0: "非诈骗",
            1: "诈骗",
            2: "未审查",
          }[value];
        },
      },
      {
        label: "审查人",
        prop: "reviewUserName",
      },
    ]);
    onMounted(() => {
      getReviewRecordList();
    });
    const getReviewRecordList = async () => {
      let params = { ...reviewRecord, ...pager };
      try {
        const { list, page } = await proxy.$api.getReviewRecordList(params);
        reviewRecordList.value = list;
        pager.total = page.total;
      } catch (error) {}
    };
    const handleQuery = () => {
      getReviewRecordList();
    };
    const handleReset = (form) => {
      proxy.$refs[form].resetFields();
    };
    const handleCurrentChange = (current) => {
      pager.pageNum = current;
      getReviewRecordList();
    };
    const handleRemark = async (row) => {
      showModel.value = true;
      proxy.$nextTick(() => {
        Object.assign(reviewRecordForm, row);
        console.log(reviewRecordForm);
      });
    };
    return {
      reviewRecord,
      reviewRecordList,
      reviewRecordForm,
      columns,
      pager,
      showModel,
      handleRemark,
      getReviewRecordList,
      handleQuery,
      handleReset,
      handleCurrentChange,
    };
  },
};
</script>

<style lang="scss">
.reviewRecord-manager {
  padding: 20px;
  background-color: #f5f7fa;
  .query-form {
    background-color: #ffffff;
    padding: 22px 20px 0;
    border-radius: 5px;
    .el-select {
      width: 80px;
    }
  }
  .base-table {
    border-radius: 5px 5px 0px 0px;
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #e4e8e8;
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end; /* 靠右对齐 */
    }
  }
  .custom-dialog {
    height: 500px;
    .mx-1 {
      overflow-y: auto;
      font-size: 20px;
    }
  }
}
</style>
